<template>
  <view>
    <view class="child-list-item">
      <view class="top">
        <view class="image-box" v-if="config&&config.img">
          <view class="image">
            <image class="image" v-if="detail&&detail[config.img]" :src="getImagePath(detail[config.img],true)" mode="">
            </image>
            <text v-else-if="detail&&config&&config.title&&detail[config.title.colName]">{{detail[config.title.colName].slice(0,1)}}</text>
          </view>
          <view class="image-desc"
            v-if="detail&&config&&config.imgDesc&&config.imgDesc.colName&&detail[config.imgDesc.colName]">
            <text>{{detail[config.imgDesc.colName]||''}}</text>
          </view>
        </view>
        <view class="main-temp" :class="{'margin-left':config&&config.img}" v-if="detail&&config">
          <view class="title" v-if="detail&&config&&config.title&&config.title.colName">
            <view class="main-title" :style="{color:config.title.color}">
              <view class="label" v-if="config.title.showLabel">
                {{labels[config.title.colName]||''}}:
              </view>
              <view class="value">
                {{detail[config.title.colName]||''}}
              </view>
            </view>
            <view class="sub-title"
              v-if="config&&config.subTitle&&config.subTitle.colName&&detail[config.subTitle.colName]">
              <text class="cu-btn bg-red light round sm">{{detail[config.subTitle.colName]||''}}</text>
            </view>
          </view>
          <view class="col-list" v-if="config.cols">
            <view class="col-item-box" v-show="detail[col.colName]" v-for="col in config.cols">
              <view class="col-item" v-if="detail[col.colName]" :style="{color:col.color}">
                <view class="label" v-if="labels&&col.showLabel&&labels[col.colName]">
                  {{labels[col.colName]||''}}:
                </view>
                <view class="value">
                  {{detail[col.colName]||''}}
                </view>
              </view>
            </view>
          </view>
          <view class="col-list bottom" v-if="config.bottomCols">
            <view class="col-item-box" v-for="col in config.bottomCols">
              <view class="col-item" v-if="detail[col.colName]" :style="{color:col.color}">
                <view class="label" v-if="labels&&col.showLabel&&labels[col.colName]">
                  {{labels[col.colName]||''}}:
                </view>
                <view class="value">
                  {{detail[col.colName]||''}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="footer">
        <slot name="header"></slot>
        <slot name="main"></slot>
        <slot name="footer"></slot>
      </view>

      <view class="handler" v-if="groupRowButton">
        <view class="button-box" v-if="groupRowButton">
          <button class="cu-btn  round" v-show="deRowButDisplay(detail,btn,index)"
            v-for="(btn,index) in groupRowButton.otherBtn" @click="footBtnClick(btn)">
            {{ btn.button_name }}
          </button>
          <button class="cu-btn  round bg-blue" @click="showGroupBtn=true" v-if="groupRowButton.groupBtn.length>0">
            <!-- <text class="cuIcon-settingsfill margin-right-xs"></text> -->
            <text class="">{{groupRowButton.groupTitle||'操作'}}</text>
            <text class="cuIcon-right margin-left-xs"></text>
          </button>
        </view>
      </view>
    </view>
    <u-action-sheet v-if="groupRowButton&&groupRowButton.groupBtn" :list="groupRowButton.groupBtn"
      v-model="showGroupBtn" @click="clickGroupBtn"></u-action-sheet>
  </view>
</template>

<script>
  export default {
    name: "child-list-item",
    data() {
      return {
        showGroupBtn: false
      };
    },
    props: {
      detail: {
        type: Object
      },
      config: {
        type: Object
      },
      // 字段:标签
      labels: {
        type: Object
      },
      rowButton: {
        type: Array
      }
    },
    computed: {
      itemData() {
        return this.detail
      },
      groupRowButton() {
        const itemData = this.detail
        const login_user_info = uni.getStorageSync('login_user_info')
        if (!this.rowButton) {
          return false
        }
        let buttons = this.deepClone(this.rowButton)
        buttons = buttons.filter((btn, index) => {
          //催办按钮只在 我的申请页面显示
          if (this.proc_data_type != "mine" && btn.button_type == 'urge') {
            return false;
          }
          if (btn.disp_exps) {
            // #ifdef H5
            return this.evalBtnDispExps(btn.disp_exps, itemData)
            // #endif
          } else {
            return this.deRowButDisplay(this.itemData, btn, index)
            // return true
          }
        })
        let groupBtn = buttons.filter(btn => {
          if (btn.moreConfig?.button_para?.group_tag) {
            btn.text = btn.button_name
            // return this.deRowButDisplay(this.itemData,btn,index)
            return true
          }
        })

        let otherBtn = buttons.filter(btn => !groupBtn.find(item => item.id === btn.id))
        let req = this.itemData.is_leaf
        if (Array.isArray(this.showBtn) && this.showBtn.length > 0 && req !== '是') {
          otherBtn = otherBtn.concat(this.showBtn)
        }

        let groupTitle = '操作'
        if (Array.isArray(groupBtn) && groupBtn.length > 0) {
          groupTitle = groupBtn[0]?.moreConfig?.button_para?.group_tag
        }
        return {
          groupBtn,
          otherBtn,
          groupTitle
        }
      },
    },
    methods: {
      clickGroupBtn(index) {
        let buttons = this.groupRowButton.groupBtn
        if (Array.isArray(buttons) && buttons.length > 0) {
          let btn = buttons[index]
          this.footBtnClick(btn)
        }
      },
      footBtnClick(btn) {
        this.$emit('click-foot-btn', {
          button: btn,
          row: this.detail
        });
      },
      deRowButDisplay: function(item, button, index) {
        if (!button) {
          return false
        }
        if (['duplicate'].includes(button.button_type)) {
          return false
        }
        if (Array.isArray(this.itemData._buttons)) {
          if (typeof index === 'number' && (index || index === 0)) {
            return this.itemData._buttons[index]
          }
        }
        if (button && button.button_type == 'customize') {
          if (button.disp_exps) {
            // #ifdef H5
            return this.evalBtnDispExps(button.disp_exps, item)
            // #endif
          }
        }
        if (item && button.hasOwnProperty('isShow') && button['isShow'].length > 0) {
          let isShow = [];
          for (let key in button['isShow']) {
            switch (button['isShow'][key].ruleType) {
              case 'eq':
                if (item[button['isShow'][key].colName] === button['isShow'][key].value) {
                  isShow.push(true);
                }
                break;
              case 'nq':
                if (item[button['isShow'][key].colName] !== button['isShow'][key].value) {
                  isShow.push(true);
                }
                break;
              default:
                break;
            }
          }
          if (isShow.length === button['isShow'].length) {
            return true;
          } else {
            return false;
          }
        } else {
          return true;
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .child-list-item {
    // margin: 20rpx 0 0;
    background-color: #fff;
    padding: 20rpx 20rpx 0;
    border-radius: 20rpx;

    .top {
      display: flex;

      .image-box {
        .image {
          width: 120rpx;
          height: 120rpx;
          line-height: 120rpx;
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          border-radius: 50%;
          border: 1px solid #f1f1f1;
        }
      }

      .main-temp {
        // margin-left: 30rpx;
        flex: 1;

        .title {
          font-size: 16px;
          font-family: 苹方-简;
          color: #333333;
          line-height: 60rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .main-title {
            min-width: 70%;
            display: flex;
            flex-wrap: wrap;
          }

          .sub-title {
            padding: 10rpx;
          }
        }

        .col-list {
          display: flex;
          flex-wrap: wrap;

          &.bottom {
            margin-top: 10rpx;
            padding-top: 10rpx;
            border-top: 1rpx solid #F2F1F6;
            display: flex;
            justify-content: space-between;

            .col-item-box {
              text-align: left;

              &:nth-child(2n) {
                text-align: right;
              }
            }
          }

          .col-item-box {
            min-width: 45%;

            .col-item {
              min-width: 50%;
              font-size: 14px;
              font-family: 苹方-简;
              font-weight: normal;
              color: #ADAEBB;
              display: flex;
              line-height: 40rpx;

              .label {
                margin-right: 10rpx;
              }
            }
          }
        }

      }
    }

    .handler {
      padding: 20rpx 20rpx;
      border-bottom: 1rpx solid #F2F1F6;
      .button-box {
        display: flex;
        justify-content: flex-end;

        .cu-btn {
          margin-left: 10rpx;
        }
      }
    }

    // .footer {
    //   border-top: 1rpx solid #F2F1F6;
    //   margin-top: 20rpx;
    //   padding-top: 20rpx;
    // }
  }
</style>
